<template>
  <div class="slider-banner banner" v-if="config.imageItems && config.imageItems.length > 0" :style="boxStyle">
    <swiper
      indicatorDots="true"
      v-if="images.length > 0"
      :interval="config.duration"
      :circular="true"
      :autoplay="true"
    >
      <block v-for="(item, index) in images" :key="index">
        <swiper-item>
          <div @click="item.href ? $router.push(item.href) : ''" class="swiper-item">
            <img :src="item.url">
          </div>
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "swiper-list",
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  mounted() {},
  computed: {
    images() {
      return this.config.imageItems;
    },
    boxStyle() {
      let customerPadding = this.config.customerPadding;
      if(customerPadding == '1'){
        return `margin-top:${this.config.marginTop}px;padding:${this.config.padding}px;`
      } else {
        return `margin-top:5rpx;padding:30rpx;`
      }
    }
  }
};
</script>

<style scoped>
.swiper-item {
  height: 100%;
}
</style>


